<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class LoginTest extends React.Component{
    constructor(props){
        super(props)
        this.state={
            pwd: '' 
        }
    }
    handleSubmit=(event)=>{
        const name = this.nameInput.value
        const {pwd} = this.state
       alert(`准备提交的用户名为${name}, 密码为 ${pwd}`)
     
       //阻止事件提交
       event.preventDefault()
    }

    handleChange=(event)=>{
      //读取输入框的值
      const pwd = event.target.value
      // 更新pwd的值
      this.setState({pwd})
    }

    render(){
        return(
            <div>
               <form onSubmit={this.handleSubmit}> 
               用户名：<input type="text" ref={input=>this.nameInput=input}/>
               密码：<input type="password" value={this.state.pwd} onChange={this.handleChange}/>
                <input type="submit" value="登陆"/>
               </form>
            </div>
        )
    }
}

ReactDOM.render(
    <LoginTest />, document.getElementById('root')
);
/*
  包含表单的组件分类 
        受控组件 表单项输入数据能自动收集成状态 
        非受控组件 需要时才手动读取表单输入框中的数据 
*/
s 
/*
功能界面的组件化编码流程 
    1拆分组件 拆分界面，抽离组件 
    2实现静态组件，使用就实现静态效果 
    3实现动态组件 动态显示初始化数据，交互功能从绑定事件监听开始 
2 //数据保存在那个组件内 ？
    看数据是某个组件需要(给自己)   还是某些组件需要(给父级) 
    1
  //需要在子组件中改变否则就的状态 子组件中不能直接改变父组件的状态 
  //状态 在那个组件 更新状态的行为(函数方法) 就在哪里 
*/




</script>